<!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>jQuery 菜单（Menu） </title>
		<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
		<style>
			.selected {
				color: aquamarine;
			}
		</style>
	</head>

	<body>

		<div class="menu">

			<ul>
				<li>1
					<ul>
						<li>1.1</li>
						<li>1.2</li>
						<li>1.3</li>
						<li>1.4 ·
							<ul>
								<li>1.41</li>
								<li>1.42</li>
								<li>1.43</li>
								<li>1.44</li>
							</ul>
						</li>
					</ul>
				</li>
				<li>2</li>
				<li>3</li>
				<li>4
					<ul>
						<li>4.1</li>
						<li>4.2</li>
						<li>4.3</li>
						<li>4.4</li>
					</ul>
				</li>

				<li>5</li>
			</ul>
		</div>

		<script>
			//$('.menu ul li').addClass('selected')

			$('.menu li ul').hide();

			$('.menu li').mouseenter(function() {
				$(this).addClass('selected')
				$(this).siblings().removeClass('selected')

			})

			$('.menu li').click(function() {
				$(this).children('ul').toggle();
				$(this).children().removeClass('selected');
				
			})
		</script>

	</body>

</html>